<template>
  <div id="answer-detail">
    <a-card class="card">
      <title-component title-text="答题记录详情" />
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="记录 ID">{{ questionSubmitDetail.id }}</a-descriptions-item>
        <a-descriptions-item label="编程语言">{{ questionSubmitDetail.submitLanguage }}</a-descriptions-item>
        <a-descriptions-item label="判题状态">
          <a-tag v-if="questionSubmitDetail.submitStatus === 0" color="blue">待判题</a-tag>
          <a-tag v-if="questionSubmitDetail.submitStatus === 1" color="orange">判题中</a-tag>
          <a-tag v-if="questionSubmitDetail.submitStatus === 2" color="green">成功</a-tag>
          <a-tag v-if="questionSubmitDetail.submitStatus === 3" color="red">失败</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="题目 ID">{{ questionSubmitDetail.questionId }}</a-descriptions-item>
        <a-descriptions-item label="创建用户 ID">{{ questionSubmitDetail.userId }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ questionSubmitDetail.createTime }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ questionSubmitDetail.updateTime }}</a-descriptions-item>
        <a-descriptions-item label="判题信息" :span="2">{{ questionSubmitDetail.judgeInfo }}</a-descriptions-item>
        <a-descriptions-item label="提交内容">
          <div class="code-editor-container">
            <div
              id="code-editor"
              ref="codeEditorRef"
              style="min-height: 400px; height: 60vh"
            />
          </div>
        </a-descriptions-item>
      </a-descriptions>

    </a-card>
  </div>
</template>

<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, ref, toRaw, watch } from "vue";
import { useRoute } from 'vue-router'; // 引入 useRoute
import TitleComponent from '@/components/TitleComponent.vue'
import { getQuestionSubmitDetail } from '@/api/question.js'; // 引入接口

/**
 * 定义组件属性类型
 */
interface Props {
  value: string;
  language?: string;
  handleChange: (v: string) => void;
}

/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => "",
  language: () => "java",
  handleChange: (v: string) => {
    console.log(v);
  },
});

const done = ref(false)

defineExpose({
  resetEditorState: () => {
    done.value = false;
  }
})

const codeEditorRef = ref();
const codeEditor = ref();

const questionSubmitDetail = ref({
  id: '',
  submitLanguage: '',
  submitCode: '',
  judgeInfo: '',
  submitStatus: '',
  questionId: '',
  userId: '',
  createTime: '',
  updateTime: ''
})

const loading = ref(false);

const fetchData = async (id) => {
  loading.value = true;
  try {
    const response = await getQuestionSubmitDetail(id);
    if (response.data.code === 1) {
      questionSubmitDetail.value = response.data.data;
      questionSubmitDetail.value.judgeInfo = JSON.parse(response.data.data.judgeInfo)
    }
  } catch (error) {
    console.error('查询答题记录详情失败:', error);
  } finally {
    loading.value = false;
  }
};

const route = useRoute(); // 获取当前路由

onMounted(() => {
  const recordId = route.params.id; // 从路由参数中获取 id
  if (recordId) {
    fetchData(recordId);
  }
});

// 监听 questionSubmitDetail.value.submitCode 的变化
watch(
  () => questionSubmitDetail.value.submitCode,
  (newValue) => {
    if (done.value === false && codeEditor.value) {
      toRaw(codeEditor.value).setValue(newValue)
      done.value = true
    }
  },
  { immediate: true }
);

// 监听 questionSubmitDetail.value.submitLanguage 的变化
watch(
  () => questionSubmitDetail.value.submitLanguage,
  () => {
    if (codeEditor.value) {
      monaco.editor.setModelLanguage(
        toRaw(codeEditor.value).getModel(),
        questionSubmitDetail.value.submitLanguage
      );
    }
  }
);

onMounted(() => {
  if (!codeEditorRef.value) {
    return;
  }
  // Hover on each property to see its docs!
  codeEditor.value = monaco.editor.create(codeEditorRef.value, {
    value: questionSubmitDetail.value.submitCode,
    language: questionSubmitDetail.value.submitLanguage,
    automaticLayout: true,
    colorDecorators: true,
    minimap: {
      enabled: true,
    },
    readOnly: true, // 设置为只读状态
    theme: "vs-dark",
  });

  // 编辑 监听内容变化
  codeEditor.value.onDidChangeModelContent(() => {
    props.handleChange(toRaw(codeEditor.value).getValue());
  });
});
</script>

<style scoped>
.card {
  margin-top: 20px;
}

.code-editor-container {
  margin-top: 20px;
}
</style>
